<template>
  <div class="container">
    <div class="main">
      <!-- 头部搜索 -->
      <div class="top">
        <div class="left">
          <el-input
            v-model="searchValue"
            placeholder="请输入编号查询"
            prefix-icon="el-icon-search"
            class="input"
            clearable
            @clear="clear"
          />
        </div>
        <div class="right">
          <el-button size="mini" @click="clear">清除</el-button>
          <el-button type="primary" size="mini" @click="search">搜索</el-button>
        </div>
      </div>
      <!-- 中间 -->
      <div class="data">
        <i class="el-icon-info" />
        数据一共 {{total}} 条
      </div>
      <div class="table">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="id" label="编号" width="180"></el-table-column>
          <el-table-column prop="questionType" label="题型" width="100" :formatter="fn"></el-table-column>
          <el-table-column prop="questionIDs" label="题目编号" width="200">
            <template slot-scope="scope">
              <div v-for="(items,index) in scope.row.questionIDs" :key="index">
                <a href="#" style="color:#09f;" @click="look(items.id)">{{items.number}}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="addTime" label="录入时间" width="150"></el-table-column>
          <el-table-column prop="totalSeconds" label="答题时间(s)" width="150"></el-table-column>
          <el-table-column prop="accuracyRate" label="正确率(%)" width="150"></el-table-column>
          <el-table-column prop="userName" label="录入人" width="150"></el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="scope">
              <el-button type="danger" icon="el-icon-delete" circle @click="open(scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="footer">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            :current-page="page"
            :page-sizes="[1, 2, 3, 5]"
            :page-size="pagesize"
            layout="sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
        <questionslook ref="questionslook"></questionslook>
      </div>
    </div>
  </div>
</template>

<script>
import { randoms, removeRandoms } from '../../api/hmmm/questions'
import questionslook from './component/questionslook.vue'
export default {
  data () {
    return {
      searchValue: '',
      page: 1,
      pagesize: 5,
      total: 0,
      tableData: []

    }
  },
  components: {
    questionslook
  },
  created () {
    this.randoms()
  },

  methods: {
    async randoms () {
      const { data } = await randoms({
        page: this.page,
        pagesize: this.pagesize,
        keyword: this.searchValue
      })
      // 如果没有数据  并且 当前的页数大于1
      if (data.items.length === 0 && this.page > 1) {
        this.page--
        this.randoms()
        return
      }
      this.tableData = data.items
      this.total = data.counts
    },
    fn (row, column, cellValue, index) {
      if (cellValue === '1') {
        return '单选'
      } else if (cellValue === '2') {
        return '多选'
      } else {
        return '简答'
      }
    },
    handleCurrentChange (val) {
      this.page = val
      this.randoms()
    },
    handleSizeChange (val) {
      this.pagesize = val
      this.randoms()
    },
    open (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await removeRandoms(row)
        this.randoms()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    search () {
      if (this.searchValue === '') { this.$message('请输入编号后查询') }
      this.page = 1
      this.randoms()
    },
    clear () {
      this.searchValue = ''
      this.randoms()
    },
    look (id) {
      this.$refs.questionslook.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.questionslook.getdetailList(id)
      })
    }

  }

}

</script>

<style scoped>
.container {
  padding: 20px;
}
.main {
  background-color: #fff;
  width: 100%;
  padding: 20px;
  height: 100vh;
}
.search {
  width: 250px;
}
.top {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
}
.data {
  background-color: #f4f4f5;
  height: 25px;
  line-height: 25px;
  padding-left: 5px;
  color: #909399;
  font-size: 14px;
}
.footer {
  padding: 20px;
  float: right;
}
</style>
